生活 中 ， 我 常常 被 问 : “你 是 做 什么 的 ? ”我 会 回答 : “互联 网 视 锅 设计 师 。 ”对 方 很 不 解 ， 什 么 叫 互联 网 视 竞 设计 师 ” 我 
通常 这 么 解释 : 在 有 些 公司 里 ,我 们 被 称 为 UI 设计 师 ， 但 有 时 也 会 被 称 为 VI 设计 师 。 不 绾 称呼 是 怎样 的 ， 我 们 的 工作 都 是 在 电 
脑 或 手机 屏幕 上 针对 界面 皮肤 的 设计 。 我 们 的 设计 为 互联 网 产品 服务 ， 在 针对 界面 皮肤 设计 的 时 候 ， 会 对 用 尸体 验 进 行 研 究 分 
析 。 


由 


在 平时 的 工作 中 ， 我 友 现 有 些 合作 部 门 的 同事 竟然 也 不 太 了 解 我 们 的 工作 内 容 ， 以 及 视觉 设计 的 价值 。 这 坚定 了 我 写 这 本 书 
的 决心 。 


为 什么 要 瑟 这 本 书 


从 包 聂 斯 到 Google MO 的 Material Design， 互 联网 的 视 完 设计 既 继承 又 颠覆 着 传统 视 党 设计 理念 。 每 一 年 都 有 许 许多 多 的 
毕业 生 或 者 转行 人 员 开 始 从 事 互 联网 产品 的 视 竞 设计 师 工作 。 


2015 年 ,我 在 面试 了 100 多 位 应 聘 者 后 友 现 ，80%~90% 的 设计 师 应 聘 者 对 自己 的 职业 之 无 规划 ， 并 且 对 职位 定义 不 清 。 他 
们 认为 只 要 是 视觉 设计 的 工作 ， 都 能 胜任 。 其 中 有 些 应 聘 者 是 仪 对 设计 抱 有 兴趣 的 ， 但 他 们 没有 设计 背景 ， 也 没有 设计 方面 的 正 
规 培训 和 工作 经 验 ; 还 有 一 些 刚刚 毕业 的 校 招 生 ， 由 于 不 清楚 互联 网 公司 的 职位 分 配 和 工作 内 容 ， 导 致 求职 受到 阻碍 。 这 些 人 可 
能 在 设计 领域 中 会 有 很 不 销 的 友 展 ， 但 在 他 们 踏 入 这 个 领域 时 ， 其 实 已 经 镜 过 了 求职 民 机 ， 非 常 可惜 。 

有 些 同学 在 学 校 里 会 学 习 到 一 些 别 人 制定 的 设计 理念 、 设 计 知 识 。 而 这 些 在 工作 中 ， 往 往 只 是 工作 内 容 的 一 部 分 ， 在 工作 
中 ， 科 学 的 工作 流程 、 合 适 并 能 解决 当下 间 题 的 设计 、 高 效 而 民 好 的 沟通 扩 1I5、 有 效 的 解释 说 明 设 计 才 是 成 功 的 互联 网 产品 设计 
师 必 须 拥有 的 素质 。 而 这 些 在 学 校 里 是 学 不 到 的 。 

互联 网 行业 是 一 个 友 展 非常 快 的 行业 ， 也 是 一 个 充满 创新 的 行业 ， 技 术 友 展 快 ， 商 业 模 式 层出不穷 ， 用 户 的 需求 也 在 不 断 变 
化 ， 相 似 的 产品 越 来 越 多 。 对 于 互联 网 企业 而 言 ， 要 能 让 自己 的 产品 在 这 个 快速 友 展 且 充 满 变 化 的 行业 里 更 好 地 满足 不 断 变 化 的 
用 尸 需 求 ， 只 有 为 用 己 提 供 越 来 越 好 的 产品 以 及 更 好 的 用 尸体 验 这 一 条 路 。 所 以 ， 近 几 年 ， 互 联网 行业 中 成 熟 的 公司 越 来 越 重 视 
UED 团 队 。 在 一 些 UED 团 队 中 ， 已 经 将 设计 岗位 细 分 成 : 交互 设计 和 视 党 设计 。 而 这 种 专业 的 职业 细 分 ， 是 靠 一 代 又 一 代 设 计 
师 们 目 己 总 结 措 系 得 出 来 的 。 

有 些 视 竞 设 计 师 会 误 读 界面 设计 ， 从 而 把 界面 设计 得 “ 虚 ” “大 ” “ 空 ”。 什 么 是 " 虚 ” “大 ” “ 空 ”，? 

" 虚 ”: 需要 突出 产品 属性 和 信息 的 时 候 ， 却 用 设计 技巧 和 手段 掩 兰 了 产品 真正 要 表达 的 功能 特点 ， 虚 而 不 实 。 

“大 ”: 互联 网 环境 下 ， 相 似 的 产品 非常 多 ,一 些 闫 品 或 者 产品 功能 是 有 时 效 特性 的 ， 当 天 品 友 布 错过 了 有 效 时 机 时 ， 无 论 
做 得 多 好 都 会 流失 用 尸 。 所 以 在 设计 的 时 候 若 思想 太 多 ， 做 得 范围 太 广 ， 往 往 都 会 导致 产品 友 布 错失 展 机 。 

“ 空 ”: 设计 师 没 有 真正 了 解 产 品 ， 只 是 在 烃 浴 自己 的 技能 ,设计 理 念 与 产品 理念 矛盾 。 


' 虚 ”“ 大 ”“ 空 ”会 使 工作 伙伴 对 我 们 的 能 力 产生 质疑 。 人 在 没有 任何 经 验 和 总 结 可 参考 的 情况 下 ， 设 计 师 的 成 长 往往 会 受 
到 阻碍 ， 对 目 己 的 职业 道路 会 产生 迷 滋 和 质疑 。 本 书 融 是 基于 以 上 原因 策划 出 版 的 ， 和 希望 本 书 能 帮助 视觉 设计 师 们 快速 成 长 ， 少 


走 达 路 。 


读者 对 象 


本 书 的 主要 读者 包括 从 事 互联 网 视 党 设计 的 应 届 毕 业 生 、 转 行 从 事 互 联网 产品 视 党 设计 的 从 业 人 员 ， 视 完 设 计 师 (以 互联 网 
为 主 ) 、 视 总 设计 团队 管理 人 员 (以 互联 网 为 主 ) 、 产 品 经 理 ， 以 及 用 户 体 验 从 业 人 员 。 


刚 毕 业 的 同学 : 阅读 这 本 书 ， 可 以 理解 如 何在 互联 网 的 环境 中 开展 目 己 的 工作 ， 从 学 生 身 份 切换 到 社会 人 身份 ， 了 解 视 帝 设 
计 师 的 职能 ， 工 作 的 流程 和 如 何 提升 专业 技能 。 


转行 成 为 互联 网 一 员 的 设计 师 : 通过 阅读 本 书 ， 可 以 了 解 互联 网 环境 的 设计 团队 是 如 何 合作 、 如 何 思考 的 ， 帮 助 转行 设计 师 
快速 入 门 ， 并 融入 互联 网 工作 氛围 。 


和 视 完 设计 师 打 父 天 的 相关 人 士 : 可 以 了 解 视 竞 设 计 师 的 工作 和 思考 学 畴 。 本 书 将 感性 的 设计 内 容 用 文字 的 方式 理性 地 传达 
给 读者 ， 从 而 帮 读 者 了 解 并 理解 设计 师 的 工作 。 


公司 的 高 层 : 通过 阅读 本 书 ， 领 导 们 能 更 了 解 视 觉 设 计 师 的 感受 、 职 业 友 展 方 向 ， 从 而 使 视 锅 设计 师 在 工作 中 可 以 更 好 地 体 
现 目 己 的 价值 ， 并 且 在 职业 友 展 道路 上 有 更 大 的 友 挥 空间 。 


如 何 阅读 本 书 


本 书 的 内 容 基 本 都 是 干货 ， 是 我 的 经 历 、 经 验 的 系统 忠 结 。 书 中 的 观点 和 论证 均 在 我 9 年 的 互联 网 产品 视 党 设计 工作 中 得 到 
了 验证 和 提炼 。 本 书 从 界面 设计 逻辑 的 层级 分 析 到 设计 的 细节 分 析 ， 从 工作 沟通 的 合作 方式 到 设计 语言 的 表达 解释 均 有 深刻 曾 
述 。 具体 来 说， 本 书 从 以 下 三 个 层面 进行 了 讲述 : 


第 一 层 讲解 了 互联 网 产品 视 名 设计 师 的 职业 规划 、 需 要 具备 的 能 力 ， 这 部 分 内 容 可 以 帮助 入 门 级 的 设计 师 进行 技能 储备 ， 帮 
助 中 级 设计 师 对 自己 的 职业 生涯 进行 规划 ， 帮 助 设 计 管 理 者 确定 招聘 准则 。 


第 二 层 讲解 了 设计 方向 和 设计 方法 ， 一 些 设计 万 法 可 以 帮助 大 家 在 互联 网 的 工作 中 快速 论证 和 目 省 设计 是 否 是 准确 合适 。 同 
时 还 讲解 了 大 型 改版 设计 郁 期 调研 该 如 何 开展 。 


第 三 层 讲解 了 深入 设计 和 确立 视 党 理念 的 相关 知识 ， 这 部 分 内 容 比较 专业 ,技术性 更 强 ， 书 中 会 用 大 量 的 例子 来 说 明和 解释 
钢 帝 理念 及 一 些 确立 视 况 理念 的 方法 论 。 


本 书 一 共 分 五 章 ， 具 体内 容 安排 如 下 : 


第 1 章 讲述 互联 网 产品 及 其 视 党 设计 概念 ， 叶 在 让 读者 对 互联 网 产品 有 一 个 整体 的 了 解 。 作 为 一 名 合格 的 互联 网 产品 视觉 设 
计 人 员 ， 了 解 这 些 内 容 有 助 于 形成 正确 的 设计 观 ， 也 区 是 找到 设计 方向 和 设计 理念 。 这 一 章 还 讲解 了 互联 网 产品 视觉 设计 师 的 职 
业 规 划 、 需 要 知道 的 5 个 关键 点 和 需要 掌握 的 4 种 学 习 方 法 ， 这 些 都 是 形成 设计 理念 的 基础 。 


第 2 章 是 在 第 1 章 的 基础 上 对 设计 的 方向 和 理念 进行 安 观 性 的 剖析 。 这 一 章 下 先 明 确 了 战略 和 用 户 对 于 互联 网 产品 视觉 设计 
人 员 来 说 意味 着 什么 ， 接 着 深层 训 析 了 对 互联 网 产品 视 党 设计 人 员 非 常 重要 的 一 个 概念 一 一 层级 ， 包 括 什 么 是 层级 、 为 什么 要 
掌握 层级 、 如 何 建立 层级 等 。 只 有 掌握 了 层级 ， 才 可 能 成 为 一 名 合格 的 设计 师 。 本 章 最 后 系统 介绍 了 视 咯 设计 的 万 法 和 流程 ， 这 
部 分 内 容 虽 在 帮助 设计 师 在 掌握 了 层级 ， 有 了 成 为 一 名 合格 设计 师 的 潜质 之 后 ， 知 道 如 何 开展 设计 工作 。 这 一 章 的 内 容 既 能 够 帮 
助 个 人 快速 处 理 和 制作 设计 ， 又 可 以 帮助 团队 规 沁 设 计 流程 和 方法 ， 提 高 团队 效率 。 


在 擎 握 了 第 2 草 的 宕 观 知识 后 ， 第 3 章 开始 围绕 细节 设计 展开 讲解 。 这 一 章 主要 包括 两 大 块 内 容 一 一 设计 元 素 和 颜色 搭配 ， 
元 素 + 颜色 = 作品， 所 以 擎 握 了 这 两 部 分 内 容 残 可 以 设计 出 令 人 担 案 叫绝 的 作品 。 这 一 章 从 颜色 代表 的 情感 、 颜 色 的 模式 、 颜 色 
选取 的 两 种 方法 等 角度 详细 介绍 了 颜色 搭配 的 方法 ;从 图 标的 类 型 、 像 素 、 体 量 感 、 选 择 、 动 效 设 计 、 使 用 情况 等 方面 介绍 了 图 
标的 使 用 方法 ; 同时 还 对 文字 和 表单 的 设计 进行 了 详细 分 析 。 


在 了 解 了 设计 的 方方面面 之 后 ， 本 书 指出 让 设计 师 进 一 步 提升 的 方法 ， 也 残 是 第 4 章 要 介绍 的 内 容 一 一 回归 设计 理念 。 这 一 
草 告 诉 视 党 设计 师 在 设计 完毕 后 要 进行 反 恩 、 上 自省 ， 提 炼 设计 理念 ， 论 证 设计 方向 ， 这 样 不 仅 能 让 作品 有 感性 的 视 党 传达、 理性 
的 理论 支持 ， 还 能 让 设计 师 找到 不 足 、 和 积累 经 验 。 要 想 进 阶 为 更 高 级 别 的 视 膨 设计 师 ， 本 章 内 容 是 必 学 的 。 


前 面 4 草 是 视 党 设计 师 进 行 创作 的 完整 流程 ， 是 一 个 完整 的 视 党 设计 工作 链 ， 在 这 个 链条 上 每 一 环 都 是 后 面 一 环 的 支撑 ， 缺 
一 不 可 。 但 是 在 这 个 链条 之 上 必须 配 以 设计 规 沁 ， 才 能 让 其 更 加 稳固 ， 这 就 是 第 5 章 要 讲解 的 内 容 。 第 5 章 在 明确 了 设计 规范 的 
重要 性 之 后 ， 给 出 了 制定 规范 的 5 大 原则 和 具体 流程 ， 最 后 还 辅 以 具体 的 案例 ， 让 读者 在 掌握 理论 层面 的 知识 后 ， 还 能 通过 他 人 
的 成 功 经 验 知道 目 己 的 工作 如 何 沙 地 ! 


希望 本 书 能 够 唤起 读者 在 互联 网 产品 的 视 党 设计 过 程 中 的 一 些 思考 ， 同 时 也 希望 本 书 能 使 读者 比较 深入 地 了 解 我 想 要 表达 的 
对 互联 网 产品 的 视 党 设计 的 理解 。 


和 俊 源 和 勘误 


书 中 的 图 片 都 是 进行 示意 的 设计 稿 ， 价 格 和 数字 都 仅 为 举例 需要 。 由 于 经 验 和 精力 有 限 ， 本 书 难以 全 万 位 从 点 滴 细节 中 深入 
而 系统 地 解释 互联 网 产品 的 视 嘻 设计。 如 果 能 帮助 大 家 认识 视 党 设计 师 的 岗位 ， 理 解 视 党 设计 师 ， 那 么 对 于 视 完 设计 师 以 及 我 本 
人 来 说 ， 已 经 足够 了 。 


如 果 你 有 任何 针对 本 书 的 宝贵 意见 或 建议 ， 欢 迎 友 送 邮件 至 邮箱 naonao_mail@126.com。 期 待 能 够 得 到 你 的 真 效 反馈 。 
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第 1 草 认识 互联 网 产品 品 视 贫 名 设计 


1.1 什么 是 互联 网 产品 的 视 殉 设计 
互联 网 的 发 展 ， 让 我 们 的 生活 越 来 越 便利 。 用 户 在 追求 产品 功能 便利 的 同时 ， 对 界面 品质 的 追求 也 越 来 越 高 。 互 联网 产品 的 


视觉 设计 既是 对 互联 网 产品 的 包 半 ， 也 是 对 互联 网 产品 的 一 种 解释 。 赵 来 越 多 的 人 对 界面 的 视觉 设计 产生 浓厚 的 兴趣 ， 想 进一步 
了 解 什 么 是 互联 网 的 视 帝 设计 。 


第 1 草 认识 互联 网 产品 品 仙 贫 名 设计 


1.1 什么 是 互联 网 产品 的 视 多 设计 


互联 网 的 友 展 ， 让 我 们 的 生活 越 来 越 便利 。 用 户 在 追求 产品 功能 便利 的 同时 ， 对 界面 品质 的 追求 也 越 来 越 高。 互联 网 产品 的 
视觉 设计 既是 对 互联 网 产品 的 包 凌 ， 也 是 对 互联 网 产品 的 一 种 解释 。 赵 来 越 多 的 人 对 界面 的 视觉 设计 产生 浓厚 的 兴趣 ， 想 进一步 
了 解 什 么 是 互联 网 的 视 帝 设计 。 


1.2 互联 网 产品 钢 兄 设 计 师 ? 项 关键 能 


互联 网 产品 的 视觉 设计 师 不 只 是 对 界面 或 软件 进行 配色 排版 、Icon 设 计 等 ， 更 需要 对 用 户 (界面 或 软件 使 用 者 ) 、 使 用 环 
境 、 使 用 方式 进行 定位 ， 并 最 终 为 界面 或 软件 用 尸 服 务 (设计 ) 。 这 类 视 党 设计 师 进 行 的 是 集 科学 性 与 艺术 性 于 一 身 的 设计 ， 简 
单 来 况 ， 他 们 需要 完成 的 正 是 一 个 不 断 为 用 户 制 造 视 党 效果 ， 并 使 之 满意 的 过 程 。 


有 些 设计 师 说 ， 我 从 小 学 习 美 术 ， 素 摘 、 色 彩 都 很 棒 ， 参 加 过 国家 级 美术 大 赛 ， 获 得 了 很 高 的 奖项 。 这 些 只 能 证 明 你 的 色彩 
和 构图 能 力 得 到 了 认可 ， 基 础 扎实 ， 但 与 互联 网 视 部 设计 师 所 要 掌握 的 能 力 还 是 有 一 定 差 距 的 。 


许多 选择 成 为 视觉 设计 师 的 从 业者 ， 是 对 设计 富有 热情 和 兴趣 的 。 那 么 一 名 优秀 的 视 总 设计 师 需要 具备 号 样 的 能 力 ， 才 能 胜 
任 互联 网 产品 的 视 党 设计 工作 呢 ? 


一 个 优秀 的 互联 网 产品 视 总 设计 师 能 力 模 型 如 下 : 


产品 & 交 互 逻 辑 
ele|[e Interpbl tslile) 


精确 的 解 襄 能 


判别 需求 的 能 


Judgement 


人 视觉 设 计 师 能 力 模型 


1. 专 业 核 心 知识 


作为 一 名 视 况 设计 师 ， 需 要 具有 扎实 的 美术 功底 和 创造 力 ， 极 好 的 色彩 把 握 能 力 、 布 局 能 力 和 审美 能 力 ， 能 判别 美感 和 设计 
的 优 扫 。 不 管 是 业余 爱好 者 ， 还 是 受过 专业 训练 的 从 业 人 员 ， 专 业 技 能 这 个 核心 竞争 力 都 是 不 能 缺失 的 。 


创 迄 力 & 审美 


Creativity 


信 视 觉 设 计 师 的 核心 竞争 力 一 一 专业 本 身 的 核心 能 力 


如 前 文 所 说 ， 视 党 设计 中 包含 了 “LOGO、banner、icon、 界 面 设计 、 活 动 专题 、 为 介绍 产品 功能 而 进行 的 动画 设计 


等 ”， 那 么 美观 、 隐 喻 准确 、 容 易 令 人 识别 的 icon 残 需要 塑 形 能 力 。 


色彩 的 搭配 、 构 图 的 完整 、 字 体 的 设计 等 是 设计 banner 的 基础 能 力 。 排 版 、 配 色 、 对 比 等 是 设计 界面 的 基本 能 力 。 


排版 是 把 文字 、 表 格 、 图 形 、 图 片 等 进行 合理 的 排列 调整 ， 使 版 面 达到 美观 的 视 嘻 效果。 最 常见 的 网 页 布局 错误 之 一 是 定义 
了 不 正确 的 行 高 。 行 高 是 定义 一 行文 本 的 高 度 ， 所 以 我 们 必须 按照 文本 字体 大 小 来 设 定 行 高 。 


另外 需要 定义 标题 周围 的 margin 值 。 标 题 其 实 是 与 它 下 面 的 段落 相关 联 的 ， 而 不 仅 仪 是 两 个 段落 的 分 割 符 。 所 以 标题 与 下 
面 段落 的 距离 应 该 小 于 它 与 上 方 段 洛 的 距离 。 


为 了 确保 可 读 性 和 专业 性 ， 在 界面 中 尽量 避免 出 现 3 种 以 上 的 字体 ， 使 用 过 多 的 字体 会 干扰 用 户 而 且 让 界面 看 起 来 很 乱 。 相 
反 ， 较 少 的 字体 让 界面 显得 干净 易 读 。 


配色 人 入 单 来 说 束 是 将 颜色 授 在 适当 的 位 置 ， 做 一 个 最 好 的 安排 。 色 彩 是 通过 人 的 印象 或 者 联想 来 对 人 产生 心理 上 的 影响 ， 而 
配色 的 作用 融 是 通过 改变 空间 的 舒适 程度 和 环境 气氛 来 满足 消费 者 的 各 方面 要 求 。 配 色 主 要 有 两 种 方式 ， 一 是 通过 色彩 色相 、 明 
度 、 纯 度 的 对 比 来 控制 视 党 刺激 ， 达 到 配色 的 效果 ; 二 是 通过 心理 层面 感 观 传达 ， 间 接 性 地 改变 颜色 ， 从 而 达到 配色 的 效果 。 


视 宫 设计 的 运用 手法 由 图 形 、 色 彩 、 排 版 、 构 图 、 布 局 等 穿插 结合 而 成 。 对 这 些 手法 的 把 控 力 越 强 ， 设 计 核 心 能 力 越 高 。 


信 界 面 排版 


创造 力 一 一 人 类 特有 的 一 种 综合 性 本 领 。 一 个 人 是 否 具 有 创造 力 ， 是 一 流 人 才 和 三 流 人 才 的 分 水 岭 。 它 是 知识 、 智 力 、 
力 及 优良 的 个 性 品质 等 复杂 因素 综合 优化 构成 的 。 创 造 力 是 指 产 生 新 思想 ， 友 现 和 创造 新 事物 的 能 力 。 它 是 成 功 地 完成 某 种 创造 
性 活动 所 必需 的 心理 品质 。 


对 于 一 名 视 党 设计 师 来 说 ， 友 现 和 创新 是 基本 要 素 之 一 ， 没 有 创造 力 ， 设 计 师 的 生命 力也 束 没 有 了 。 


美能 力 即 艺术 和 鉴 营 能 力 ， 它 让 我 们 认识 到 什么 是 美 ， 并 且 能 评价 美 。 审 美能 力 是 可 以 培养 和 提高 的 。 多 收集 一 些 好 的 设计 
作品 ， 多 去 参观 一 些 好 的 设计 展 贞 ， 有 效 地 评价 设计 ， 都 能 逐渐 提高 审美 能 力 。 


号 样 有 效 地 评价 设计 呢 ? 大 家 有 没有 这 样 一 种 经 历 : 看 到 一 个 设计 稿 ， 想 到 一 点 说 一 各 ， 观 点 非常 友 散 ， 最 后 变 成 了 “指点 
江山 的 大 神 ”，” 


评价 设计 先 从 设计 的 整体 概况 入 手 ， 第 一 印象 让 人 接受 是 设计 的 第 一 步 ， 从 目 己 的 角度 看 看 用 户 是 不 是 对 这 个 设计 有 兴起 
并 且 愿 意 阅 读 内 容 。 这 里 所 说 的 内 容 束 是 要 表现 给 用 尸 的 主要 信息 ， 看 看 是 不是 完整 表达 了 这 些 信息 ， 有 些 设计 师 为 了 美感 的 表 
现 ， 往 往 会 缺失 对 商业 价值 的 表达 


直觉 一 一 这 个 设计 的 第 一 印象 
设计 是 不 是 非常 完整 地 表达 了 全 部 内 容 


牙 
时 


美感 一 二 整体 效果 是 不 是 与 内 容 符合 


风格 二 = 风格 是 否 准确 ， 是 否 满足 项 目的 目标 与 理念 


人 界面 整体 的 评判 


下 面 的 事例 是 当 设 计 师 接收 到 全 场 五 折 需 求 时 ， 应 该 表现 出 全 场 五 折 ， 但 是 设计 师 很 有 可 能 烘托 的 是 活动 气氛 ， 筷 记 或 完 得 
没有 必要 把 五 折 信 息 放 进 设计 里 。 束 “五 折 命 是 ”来 说 ， 下 图 中 左边 的 分 图 表达 是 准确 的 。 


全 准确 表达 商业 价值 


整体 分 析 后 ， 束 是 细 忆 分析 了 。 从 排版 、 流 程 、 颜 色 等 角度 去 判别 内 容 是 否 安 排 合理 ， 流 程 是 否 通 畅 ， 闸 色 和 风格 万 向 是 否 
一 致 。 另 外 还 有 没有 缺失 的 设计 和 多 余 的 设计 ， 并 进行 调整 。 


排版 “一 天 内 容 是 否 被 安排 在 准确 的 位 置 
帝 程 内 容 的 安排 是 否 目 然而 且 有 逻辑 性 


闫 色 


缺失 


色彩 方向 是 否 准 确 


有 没有 缺 了 什么 ， 有 没有 多 余 的 


信 细 节 分 析 


当 将 这 些 都 分 析 后 ， 我 们 残 能 忌 结 性 地 做 出 评价 ， 看 这 个 设计 是 不 是 有 效 和 有 价值 。 


2 .产品 &% 交 互 多 加 
为 产品 进行 设计 的 时 候 ， 需 要 了 解 业务 和 产品 需求 。 这 些 业务 知识 、 产 品 逻 辑 或 交互 逻辑 ， 能 帮助 视觉 设计 师 更 准确 地 将 产 


品 理念 和 交互 理念 结合 起 来 ， 通 过 视 总 设计 的 包 委 ， 精 确 地 传达 给 用 户 。 


验证 和 迭代 的 需求 将 收集 到 的 需求 进行 各 方面 数据 分 析 


ee 
可 用 性 测试 


数据 分 析 


验证 设计 将 分 析 后 的 需求 进行 设计 


会 富有 上 下 游 知 识 ， 让 设计 循环 ， 使 产品 更 稳定 和 成 熟 


另外 ， 准 确 地 把 握 用 户 心 理 ， 对 用 户 体 验 有 深入 的 研究 ， 具 有 对 可 用 性 测试 结果 评估 的 能 力 ， 对 用 户 操作 沅 程 及 用 户 使 用 习 
惯 有 深入 理解 ， 这 些 工 作 是 需要 团队 协作 的 。 例 如 可 用 性 测 坛 和 评估 ， 需 要 从 事 用户 研 究 的 专业 人 员 对 用 户 进行 观察 ， 进 行 结论 
分 析 。 只 有 人 在 这 些 论点 的 基础 上 产 出 的 设计 才能 满足 用 户 的 需求 和 诉求 。 


用 户 体验 设计 ， 最 终 是 要 落实 到 用 户 身上 的 。 客 观 、 中 立 的 验证 、 分 析 、 评 佑 能 力 是 一 个 视 沉 设计 师 的 重要 素质 。 无 论 个 人 
还 是 团队 ， 设 计 的 成 果 都 需要 通过 客观 测试 才能 算是 合乎 标准 。 


3. 判 别 需 求 的 能 


视 咒 设计 师 是 一 个 非 单 看 重 专业 度 的 册 位 ， 相 信 所 有 的 设计 师 都 想 工 作 伙伴 认可 目 己 的 专业 能 力 。 一 个 经 单 及 用 盲目 跟 进 产 
品 需 求 和 交互 设计 稿 这 类 工作 方法 的 视 党 设计 师 ， 是 无 法 让 人 信服 的 。 因 为 你 的 核心 能 力 (创造 力 、 审 美 等 ) 他 们 无 法 理解 ， 而 
和 他 们 之 间 的 逻辑 沟通 是 缺失 的 ， 工 作 伙 伴 会 潜移默化 地 认为 这 个 视 完 设 计 师 是 对 交互 稿 进行 色彩 搭配 的 “美人 ”。。 视 嘻 设 计 师 
设计 出 的 稿件 ， 往 往 会 被 挑战 和 质疑 ， 而 视 癌 设计 师 即 使 在 核心 能 力 角度 据 理 力争 ， 也 无 法 让 他 们 改观 ， 双 方 企 两 条 平行 线 上 交 
流 。 那 么 视 党 设计 师 的 专业 度 又 体现 在 哪些 地 方 ? 


Me Wi 

”“ 判别 需求 的 能 力 “  … 
0 ~/Ay,N 
A A of 


“…。 步骤 清楚 .”.、 “需求 是 否 可 行 . 


人 判别 需求 的 各 个 层面 


专业 度 不 等 同 于 核心 能 力 。 在 我 们 提供 “核心 能 力 ” 给 我 们 需要 设计 的 对 象 的 同时 ， 进 行 馆 辑 分 析 和 用 尸体 验 研究 之 后 ,我 
们 还 需要 做 一 个 具有 判别 需求 能 力 的 视 总 设计 师 。 对 不 符合 逻辑 的 产品 需求 提出 质疑 ， 对 缺失 的 交互 逻辑 进行 补充 ， 并 能 给 出 相 
应 的 解决 方案 。 


我 问 过 一 些 设计 师 : “这 个 地 万 为 什么 这 么 设计 ? 它 似乎 不 符合 弟 理 。” 设 计 师 回答 : “产品 经 理 要 求 这 么 做 的 。 ”或 
者 “交互 稿 上 这 么 设计 的 ”。 这 样 的 回答 ， 好 像 是 在 撤 清 设计 责任 ,但 视 党 设计 师 往往 志 记 目 己 也 是 这 个 项 目 或 任务 的 一 分 子 ， 
目 己 承担 着 为 用 户 市 来 更 方便 或 合乎 冲 理 设计 的 责任 。 
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请 设计 师 大 胆 地 向 你 的 伙伴 提出 你 的 观点 ， 和 他 们 一 起 探讨 ， 将 更 好 的 设计 市 给 用 户 吧 ! 


4. 精 确 的 解说 能 力 


设计 师 是 设计 作品 的 翻译 官 ， 我 们 需要 把 产品 语言 转化 成 用 户 能 理解 的 方式 进行 传递 让 使 用 它 的 人 能 读 懂 它 、 襄 爱 它 。 不 
要 音 亩 目 己 的 表达 能 力 ， 该 为 目 己 设计 襄 明 的 地 方 ， 释 放 上 自己 的 口才 吧 。 


只 有 设计 师 是 最 了 解 目 己 设计 意图 的 人 ， 也 是 这 个 产品 设计 的 第 一 个 用 户 ， 设 计 师 需 要 对 目 己 设计 的 界面 有 解 况 和 包 妆 的 能 
力 ， 让 别人 能 一 眼看 到 设计 中 的 特点 和 精髓 。 有 些 设计 师 设计 完 界面 之 后 十 分 “ 音 雍 ”， 没 有 设计 说 明 ， 疫 有 设计 分 析 ， 友 出 一 
封 设计 完毕 的 邮件 后 “ 任 人 衬 割 ”， 把 自己 的 观点 深 埋 在 心里 。 接 收 方 不 知道 设计 师 的 意图 ， 于 是 用 上 自己 的 主观 喜好 去 评判 设 
计 。 这 样 束 导 致 设计 师 背 后 有 一 群 指点 江山 的 “大 神 ”， 设 计 师 的 工作 积极 性 受到 打击 ， 对 团队 信任 度 和 融洽 度 也 造成 影响 。 设 
计 师 如 果 能 够 充分 地 说 出 自己 的 设计 意图 ， 让 接收 方 理解 ， 以 及 使 理解 不 产生 偏 帮 ， 束 可 以 省 去 不 必要 的 沟通 成 本 。 
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“精确 的 解说 能 力 .… 
“e-mail 解说 Interpretation .，“.， PPT 解 说 . 


信 精 确 的 解说 能 力 


有 时候 设 计 师 不 知道 息 么 表达 目 己 的 设计 意图 ， 我 们 常常 会 听 到 这 样 的 说 明 : “从 用 尸体 验 的 角度 出 友 做 出 这 样 的 设计 。 
”什么 是 用 尸体 验 ? 它 是 一 句 口号 吗 ? 或 是 万 能 回答 的 解释 ? 设计 师 完全 可 以 把 自己 分 析 的 经 过 、 考 虑 的 各 个 方面 解说 给 伙伴 和 
团队 。 


如 果 解 况 对 象 比 较 多 ， 需 要 内 领导 汇报 等 ， 可 以 制作 PPT 进 行 演示 ， 将 设计 过 程 、 分 析 都 详细 演示 。 如 果 是 小 泡 围 的 解 况 ， 
可 以 在 会 议 宇 或 电脑 前 进行 演示 。 在 解说 对 象 不 适合 面对面 演示 的 情况 下 ， 可 以 运用 邮件 形式 ， 将 需要 解说 的 局 部 突出 况 明 。 
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会 在 邮件 中 说 明 局 部 设计 意图 
小 贴 士 : 这 既是 表达 设计 的 时 机 ， 也 是 体现 个 人 专业 度 的 时 机 ,! 
5. 工 具 掌 控 能 力 


在 这 本 书 里 我 不 会 详细 介绍 这 些 软 件 该 怎么 运用 ， 设 计 师 的 核心 能 力 从 来 不 会 因为 软件 的 限制 而 受到 限制 ， 希 望 设 计 师 明 
日 ， 软 件 只 是 实现 效果 的 工具 。 但 掌控 工具 却 是 不 可 忽视 的 能 力 ， 一 个 设计 师 很 有 创意 想法 ， 却 不 知道 怎么 实现 ， 用 哪 种 工具 实 
现 最 有 效 、 最 合适 ， 也 是 不 可 取 的 。 


众所周知 ， 视 党 设计 师 常用 的 软件 包括 : Photoshop、lllustrator、Sketch 等 。 
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Skill 


~ Sketch - 


会 设计 师 第 用 软件 
这 3 类 工具 特点 的 比较 : 


Photoshop 是 图 像 处 理 软 件 ， 它 的 专长 在 于 图 像 处 理 ， 而 不 是 图 形 创 作 ， 虽 然 最 新 的 版 本 将 矢量 功能 加 入 了 这 个 软件 ,但 
在 矢量 绘制 上 lllustrator 更 专业 一 些 。 不 过 Sketch 绘 制图 片 的 曲线 品质 比 lllustrator 好 。 


现在 是 无 线 时 代 ，App 的 诞生 众 友 SVG 格 式 的 兴起 ， 它 是 可 缩放 的 矢量 图 形 ， 可 将 矢量 图 形 数字 化 ， 文 件 也 非常 小 。 而 这 个 
格式 Photoshop 是 不 支持 的 ，lllustrator 支 持 ，Sketch 也 支持 。 


随 看 ijphone 手 机 的 热卖 和 iO37 之 后 界面 理念 的 诞生 ， 毛 琢 璃 育 景 效果 受到 广泛 运用 ， 这 种 酷 炉 视 训 效果 在 Sketch 中 是 可 轻 
易 获 得 的 ， 而 在 Photoshop 中 则 需要 一 些 复杂 的 制作 过 程 。 最 新 的 Photoshop 版 本 加 入 了 手机 端的 尺寸 和 插件 ， 使 设计 更 加 方 
便 。 


Sketch 最 近 成 为 一 款 火 爆 的 设计 工具 ， 很 多 公司 开始 使 用 。 对 于 App 的 设计 来 襄 ， 这 款 软 件 是 设计 利器 ， 操 作 方便 ， 功 能 
强大 。 当 然 它 在 创 意图 形 时 是 有 利 的 ， 而 在 创意 图 像 效果 时 需要 企 Photoshop 中 制作 完毕 ， 并 导入 到 Sketch 作为 元 件 使 用 。 
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和信 毛 玻璃 设计 效果 
这 3 类 软件 各 有 利 浆 ， 是 界面 视觉 设计 中 单 用 的 软件 ， 大 家 可 以 自行 选择 制作 方式 。 


界面 视觉 设计 师 需要 掌握 : Photoshop 或 者 Sketch，lllustrator，After Effects 或 者 Flash。 


界面 (Ps)»(st) ( AI ) fo ER 
视觉 设计 师 


Adobe Sketch Adobe Adobe Adobe 
Photoshop oC Illustrator After Effects Flash 


信 界 面 视 完 设 计 师 技能 等 级 划分 


运 昔 视 锅 设计 师 需要 营 握 : Photoshop，lllustrator，MAYA 或 者 3ds Max,Flash。 
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视觉 设计 师 


Adobe Adobe MAYA or 3ds Max Adobe 
Photoshop lllustrator Flash 


人 运营 视 党 设计 师 技 能 等 级 划分 


1.3 提升 视 名 设计 师 能 力 的 4 种 学 习 方法 


很 多 人 不 了 解 视觉 设计 师 的 价值 ， 更 直接 地 说 ， 大 多 数 视 竞 设 计 师 没有 体现 出 足够 的 、 令 人 信服 的 专业 度 。 那 么 如 何 提升 视 
总 设计 师 的 能 力 呢 ? 


1. 多 看 

视 嘻 设计 不 是 一 中 而 束 的 创造 工作 ， 它 是 不 断 达 代 、 不 断 更 新 的 过 程 。 这 里 的 “看 ” 指 的 是 设计 师 能 博多 ， 能 广泛 涉猎 ， 看 
过 好 的 设计 、 磊 的 设计 ， 能 评判 设计 的 优 务 ， 这 样 视 完 设 计 才 会 变 得 很 美 。 

知识 是 瑰宝 ， 如 今 与 互联 网 相关 的 书籍 非常 多 ， 视 膨 设 计 师 可 以 通过 多 阅读 《用 尸体 验 的 要 素 》《 操 石 成 金 》《 一 目 了 然 》 


等 用 户 体验 的 书籍 来 提高 相关 用 户 体验 的 知识 。 或 许 你 已 经 看 过 了 ， 但 反复 看 几 遍 你 会 友 现 每 次 理解 都 有 不 同 ， 将 现实 中 的 案例 
与 书 中 知识 结合 ， 会 有 不 同 的 思考 维度 。 
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全 用户 体验 相关 书籍 


《经 . 理 》“《 用 户 力 》 等 书籍 拓展 了 互联 网 相关 知识 ， 讲 解 了 产品 经 理 的 工作 情况 、 用 户 需求 的 挖掘 。 当 然 也 可 以 参与 一 些 
互联 网 交流 的 线 上 线 下 论坛 。 


i 


做 记录 或 笔记 是 设计 师 一 直 忽 略 的 积累 方式 。} 


得 企 大 学 一 年 级 的 时 候 ， 我 的 专业 课 老 师 和 我 们 分 享 了 她 保持 30 多 年 的 习 


惯 一 一 做 记录 。 她 每 到 一 个 地 区 或 国家 ， 看 到 有 趣 的 设计 或 者 建筑 ， 都 会 速写 下 来 、 记 下 来 ,或 扫 下 来 ， 这 是 对 素材 的 积累 。 
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人 互联 网 知识 相关 书籍 


“好 记性 不 如 烂 笔尖 ”， 每 当 你 话 到 嘴 边 ， 却 说 不 出 口 ， 
笔记 对 于 设计 师 意味 着 什么 ? 它 可 以 帮助 我 们 整理 思路 ， 积 轮 和 
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记 不 拘泥 于 形式 


1) 思路 


作为 一 个 设计 师 ， 笔 记 对 我 最 大 的 帮助 是 让 我 清晰 地 看 到 整个 设计 过 程 。 互 联网 产品 的 视 部 设计 在 我 眼中 像 是 数学 应 用 题 ， 
解 题 过 程 焉 是 设计 过 程 ， 有 它 需要 达到 的 目标 和 目的 对 象 ， 清 晰 的 思路 使 我 能 一 步 一 步 得 出 结论 和 答案 。 你 去 做 项 目 调研 和 更 品 
分 析 后 ， 才 会 确定 最 主要 的 设计 痛 点 在 哪里 ， 才 会 知道 你 的 莞 争 对 手 都 在 做 什么 ， 怎 样 才 会 做 得 与 他 们 不 一 样 ， 怎 样 做 到 更 好 。 
而 在 这 些 过 程 中 ， 笔 记 对 于 你 的 意义 在 于 理 清 设计 思路 ， 记 下 你 喝 得 是 重点 的 地 方 ， 进 行 下 一 步 的 分 析 。 视 嘻 设 计 师 可 以 分 析 色 
彩 ， 对 比 大 小 ， 计 算 在 设计 中 运用 过 几 种 设计 手法 ， 做 出 判断 ， 在 设计 中 做 加 减法 ， 确 保 目 己 的 设计 简洁 而 不 简单 。 


2) 积 察 


有 时 候 你 看 到 一 些 乐 西 ， 当 时 总 得 很 有 意思 ， 但 是 不 知道 能 用 在 什么 地 方 ， 移 记 下 来 ， 等 以 后 需要 做 某 个 设计 的 时 候 ， 记 下 
来 的 这 些 乐 西 都 可 以 为 你 的 头脑 风暴 或 是 设计 灵感 审 来 很 多 局 友 。 所 以 这 个 时 候 笔 记 的 意义 瓯 是， 帮助 设 计 师 积累 。 当 你 从 各 种 
渠道 友 现 灵感 的 时 候 ， 收 藏 下 来 ， 记 下 来 ， 写 一 些 当 时 的 想法 ， 可 能 暂时 用 不 到 ， 但 是 有 可 能 会 成 为 今后 你 的 设计 项 目 中 一 个 很 
好 的 友 展 方向 。 现 在 有 一 些 不 错 的 网 站 可 以 帮助 我 们 积累 素材 。 


(1) 化 瘀 网 (www.huaban.com) 。“ 论 泊 网 ”几乎 是 我 每 天 必 登 录 的 一 个 网 站 ， 是 一 个 帮 你 收集 、 友 现 网 络 上 你 喜欢 
的 事物 的 网 站 ， 一 个 简单 的 采集 工具 。 用 户 可 以 将 网 上 看 见 的 一 切 信 息 都 保存 下 来 ， 简 单 上 手 。 通 过 专属 于 “ 花 兴 网 ”的 浏览 8 
插件 一 一 “采集 到 花 兴 ”快速 完成 信息 的 收集 。 不 论 是 在 家 里 ， 还 是 在 办 公 室 ， 只 要 有 一 台 拥 有 网络 的 终端 ， 只 要 拥有 “ 论 潜 
网 ”的 账号 ， 你 残 能 轻松 收集 你 喜欢 的 信息 。 这 些 信息 不 但 附 市 原始 的 网 页 链接 ， 还 会 以 图 片 /视频 的 形式 美 轮 美 钢 地 呈现 
人 在“ 画板” 里。 用户 企 “花瓣 网 ”会 拥有 多 个 目 定 义 “ 画 板 ”， 用 来 收藏 并 分 类 展示 “采集 ”成 果 。 这 个 过 程 比 我 们 在 电脑 里 新 
建 一 个 文件 夹 还 要 简单 实用 ， 且 看 上 去 很 美 。“ 化 瓣 网 ”可 以 比 作 一 个 工具 ， 一 个 帮助 你 收藏 互联 网 上 喜欢 的 乐 西 的 工具 。 采 集 


是 第 一 步 ， 是 一 个 聚合 的 过 程 。 


2687 50 
采集 男 板 


会 花 办 网 


(2) 站 酷 网 (www.zcool.com.cn) 。“ 站 酪 网 ”聚集 了 中 国 绝 大 部 分 的 专业 设计 师 、 艺 术 阮 校 师 生 、 潮 流 艺 术 家 等 年 轻 
创意 设计 人 和 群 。 其 经 常会 举办 一 些 有 影响 力 的 界面 设计 大 赛 。“ 站 酷 网 ”一 直 任 力 于 促进 设计 师 之 间 的 交流 与 互 励 。 同 时 ，“ 站 
酪 网 ”还 为 设计 师 与 企业 搭建 互相 促进 的 桥梁 ， 帮 助 优秀 企业 与 优秀 设计 人 才 更 好 对 接 。 


旧 电 脑 打 不 开 新 视 寞 “ 恒 英 特 尔 同 麻 曾 
六 代 酷 窒 , 设计 师 标 配 影 海报 征集 
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(3) UI 中 国 (www.ui.cn) 。UI 中 国 的 前 身 是 iconfans， 简 称 IF， 是 一 个 以 “设计 师 ” 为 中 心 ， 本 着 “小 圈子 ， 大 分 
”的 原创 理念 ， 以 沙龙 、 肾 会、 学习、 交流、 分 享 为 核心 ， 为 设计 师 的 工作 与 学 习 提供 更 多 创作 灵感 和 参考 资料 的 网 站 。 
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(4) Dribbble (www.dribbble.com) 。Dribbble 的 口号 是 : 你 正在 创作 什么 ? 它 鼓励 创作 者 上 传 个 人 作品 ， 以 及 将 正在 
创作 的 作品 友 到 Dribbble 网 站 上 。Dribbble 是 通过 提供 付费 账户 服务 锰 利 ， 普 通用 尸 可 以 成 为 观察 者 ， 并 且 有 机 会 去 雇用 作品 
的 创作 者 。 一 般 来 说 ， 用 尸 页 献 作品 的 网 站 往往 内 容 、 质 量 、 水 平 参 笑 不 齐 ， 但 Dribbble 的 作品 整体 质量 却 非常 高 ， 它 有 概 食 
稿 、“ 飞 机 ” 称 ， 也 有 产品 稿 。 多 样 性 的 内 容 让 许多 摄影 师 、 设 计 师 和 其 他 创意 产业 人 十 都 喜欢 在 这 里 展示 其 未 完成 的 设计 ， 通 
过 与 其 他 设计 师 的 共同 探讨 来 激 皮 目 己 的 灵感 。 
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(5) Behance (www.behance.net) 。behance 是 著名 设计 社区 ， 在 它 上 面 ,创意 设计 人 士 可 以 展示 自己 的 作品 ， 看 别 
人 分 享 的 创意 作品 (上 面 有 许多 质量 上 乘 的 设计 作品 ) ， 还 可 以 进行 互动 (评论 、 关 注 、 站 内 短信 等 ) 。 


(6) 优秀 网 页 设计 (www.uisdc.com) 。 优 秀 网 页 设计 里 有 众多 设计 总 监 、 资 深 网 页 设计 人 员 、 设 计 爱 好 者 等 分 享 他 们 天 
田 


于 职业 的 扩 术 、 理 念 、 思 考 和 探索 ， 同 时 为 经 验 丰 晤 的 专家 和 积极 努力 的 设计 师 提 供 一 个 展 好 的 展示 目 我 的 平台 . 
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设计 讲座 受 计 是 召 聘 求 职 妇 计 服务 关于 我 们 


2016 MAYORS CHALLENGE 。 & 


眼前 一 亮 ! 7 大 秘诀 帮 你 设计 出 令 人 难 志 的 优秀 网 站 


人 优秀 网 页 设计 


总 结 : 当 你 翻 看 笔记 和 记录 时 ， 里 面 有 清晰 的 、 每 一 步 的 设计 过 程 ， 还 有 你 的 思考 和 草稿 。 当 你 回头 去 翻 的 时 候 ， 会 有 一 种 
成 惑 感 ， 感 品目 己 做 了 很 多 事情 ， 沉 泥 了 很 多 事情 。 这 是 一 种 回顾 方式 ， 在 下 次 设计 的 时 候 ， 你 残 能 对 之 前 的 设计 进行 进一步 的 
提炼 和 提升 。 


3. 多 做 


做 一 一 视 竞 设计 师 专 业 度 的 核心 表现 。 对 于 设计 师 来 疯 ， 看 得 再 多 ， 记 得 再 多 ， 这 些 环节 做 得 再 好 、 再 完美 ， 也 只 是 停 和 
在 设 计 师 目 己 的 脑子 里 。 有 学 设 计 师 在 设计 前 的 沟通 夸 伟 其 谈 ， 把 想 要 做 的 设计 说 得 非 芝 好 ， 绪 果 理 论 洲 实 不 到 实际 ， 所 有 的 想 
法 都 只 是 空中 楼 和 阁 ， 之 前 所 有 的 努力 都 只 是 在 佐证 设计 师 思 想 的 空 泛 和 不 切实 际 。 所 以 我 们 不 仅 要 能 “做 ”， 更 要 “做 ”得 漂 
之 。 如 果 一 天 做 一 稿 ， 那 么 一 年 束 是 300 多 稿 ， 在 多 做 的 训练 中 ， 可 以 提升 自己 的 专业 水 平 。 我 一 直 都 是 这 样 认 为 的 : “做 ” 决 
定 了 一 个 视 竞 设计 师 是 不 是 专业 ，“ 多 做 ”是 一 个 设计 师 最 根本 的 专业 素质 。 


4. 多 磨 
磨 -一 个 设计 ， 不 断 地 迭代 ， 在 更 新 中 “ 磨 ” 制 而 成 ， 是 耐心 、 技 巧 、 热 情 的 综合 表现 。 在 一 个 项 目的 进程 中 ， 不 可 各 


免 地 面临 很 多 的 挑战 ， 优 秀 的 设计 师 善于 友 挥 “ 磨 ” 的 精神 ， 他 们 拥有 对 视 党 设计 专业 的 无 比 热 情 ， 以 无 所 不 用 其 极 的 技巧 ， 耐 
心地 磨 一 个 又 一 个 质疑 万 ， 最 终 让 大 家 认同 并 帮助 推动 设计 的 实现 。 


1.4 视 兄 设计 师 的 职业 规划 


我 曾经 在 面试 中 仙 到 过 市 着 移动 硬盘 来 面试 的 应 征 者 ， 打 开 文 件 夹 后 密 密 奈 麻 的 设计 文件 呈现 在 我 面前 ， 作 品质 量 参 差 不 
齐 。 在 听 过 几 个 作品 曾 述 后 ， 我 不 得 不 打 断 他 ， 要 求 他 在 这 些 文件 中 挑选 目 己 认为 最 好 的 3 个 作品 向 我 前 述 设计 理念 和 思路 。 而 
我 的 面试 时 间 从 原本 计划 的 30 分 钟 ， 被 迫 延 长 至 一 两 个 小 时 ， 而 且 前 述 的 设计 思路 不 明 。 而 事实 上 在 他 打开 文件 夹 的 一 瞬间 我 
对 他 的 面试 印象 已 经 打 了 折扣 ， 因 为 这 是 一 类 没有 面试 规划 的 应 征 者， 更 甚至 于 面试 互联 网 界面 视 完 设计 师 的 岗位 ， 却 希望 从 事 
互联 网 运营 视 党 设计 工作 。 而 有 些 人 根本 不 知道 这 两 者 的 区 别 。 那 么 如 何 确 立 目 己 的 互联 网 产品 职业 规划 呢 ? 


1.5 ” 视 郊 设计 与 其 他 岗位 同事 之 间 的 配合 


1.5.1 团队 合作 
在 互联 网 环境 的 工作 中 ， 视 觉 设 计 的 工作 是 其 中 一 个 环节 。 以 视觉 为 主要 项 目的 工作 流程 与 普通 项 目 工作 流程 稍 有 不 同 。 


“立信 


有 些 公司 省 去 “交互 设计 ”这 个 环节 ， 由 产品 和 视 况 分 担 这 个 角色 。 


BRD 评 审 通过 


PRD 草 稿 提供 
目标 用 户 vv flowchart low-fi i 
use case 分 析 、 评 级 。 ”内 部 沟通 site map 设计 评审 ”behavior ”设计 评审 /测试 
视觉 需求 定位 wireframe content 
商业 驱动 
是 否 包含 UER、 创 意 视觉 区 Aig 计 


需求 分 析 


设计 评审 
元 素 多 状态 


元 素 补 全 (icon」 button ) 
项 目 级 规范 静态 视觉 方案 


视 客 万 案 


设计 推广 


交互 设计 完 音 
交互 说 明 


HTML/CSS 


review 


会 普通 项 目 


BRD 评 审 通过 
PRD 草 稿 提供 


目标 用 户 flow chart low-fi 


use case 分 析 、 评 级 内 部 沟通 site map 设计 评审 behavior 设计 评审 /测试 
视觉 需求 定位 wireframe content 

商业 驱动 

是 否 包含 UER、 创 意 视觉 次 巨 设计 


需求 分 析 


本 静态 视觉 方案 
元 素 多 状态 
元 素 补 全 (icon、button) we 


视觉 完善 设计 评审 
-| 


PRD 


review 


和信 以 视 沈 为 主要 项 目 


可 以 友 现 ， 视 党 设计 师 的 存在 ,不 是 工作 环节 的 全 部 。 一 个 产品 ， 需 要 各 个 环节 的 配合 与 合作 ， 才 能 呈现 给 用 性。 而 视 完 设 
计 师 所 从 事 的 不 单单 是 对 界面 进行 美化 工作 ， 而 是 结合 了 研究 、 探 讨 、 沟 通 等 综合 工作 。 要 更 早 地 向 合作 伙伴 秀 出 自己 的 设计 
以 便于 及 时 修正 设计 ， 并 理解 和 思考 合作 提出 的 问题 与 方案 。 团 队 之 间 的 合作 需要 互相 理解 、 支 持 和 信任 。 


第 2 章 ”设计 方 同 和 设计 理念 


2.1 ”产品 战略 与 目标 用 己 对 设计 万 同 的 影响 


要 做 出 好 的 设计 ， 你 需要 了 解 产 品 ， 并 且 知 道 你 针对 的 设计 目标 人 群 。 如 果 一 名 设计 师 连 产品 本 身 都 没有 去 了 解 过 的 话 ， 那 
做 出 来 的 东西 往往 会 一 直 徘 徊 在 修改 、 审 核 、 修 改 、 审 核 这 种 无 尽 的 循环 当中 。 


在 拿 到 原型 图 以 后 ， 我 们 要 对 整个 产品 的 信息 结构 有 一 定 的 了 解 ， 要 通过 原型 图 充分 地 去 理解 每 一 个 区 域 所 要 承载 的 信息 类 
型 以 及 信息 量 。 产 品 的 信息 框架 越 清晰 ， 那 么 你 做 出 的 设计 成 功率 就 越 高 。 


工作 流程 为 产品 需求 一 一 交互 设计 一 一 视 党 设计 ， 对 于 这 一 点 前 文 有 图 片 演示 ， 也 就 是 说 一 般 我 们 接 到 的 是 交互 稿 。 


设计 方 同 的 定位 是 帮助 分 析 页 面 信息 优先 级 、 核 心 行为 的 前 提 。 


当 设 计 师 接 到 一 个 新 的 设计 项 目 ， 并 已 经 有 了 交互 设计 或 产品 需求 文档 时 ， 首 先 需要 考虑 的 是 : 


这 是 什么 互联 网 产品 ? 
它 的 目标 人 和 群 是 哪 一 类 ? 


` 需要 达到 什么 目的 ? 


这 些 间 题 决定 了 这 个 界面 呈现 出 来 是 给 谁 看 的 、 用 的 ， 给 公司 市 来 什么 利益 ， 以 便 决 定 设计 万 癌 。 


第 2 章 ”设计 方 同 和 设计 理念 


2.1 ”产品 战略 与 目标 用 己 对 设计 万 同 的 影响 


道 你 针对 的 设计 目标 人 群 。 如 果 一 名 设计 师 连 产品 本 身 都 没有 去 了 解 过 的 话 ， 那 
审核 这 种 无 尽 的 循环 当中 。 


要 做 出 好 的 设计 ， 你 需要 了 解 产 品 ， 并 且 知 
做 出 来 的 东西 往往 会 一 直 徘 徊 在 修改 、 审 核 、 修 改 、 
品 的 信息 结构 有 一 定 的 了 解 ， 要 通过 原型 图 充分 地 去 理解 每 一 个 区 域 所 要 承载 的 信息 类 


生 拿 到 原型 图 以 后 ， 我 们 要 对 整个 产品 的 信息 结 
型 以 及 信息 量 。 产 品 的 信息 框架 越 清 晰 ， 那 么 你 做 出 的 设计 成 功率 整 越 高 。 
交互 设计 一 一 视 咯 设计 ， 对 于 这 一 操 前 文 有 图 片 演 示 ， 也 束 是 说 一 般 我 们 接 到 的 是 交互 稿 。 


工作 流程 为 产品 需求 

设计 方向 的 定位 是 帮助 分 析 页 面 信息 优先 级 、 核 心 行为 的 前 提 。 

当 设 计 师 接 到 一 个 新 的 设计 项 目 ， 并 已 经 有 了 交互 设计 或 产品 需求 文档 时 ， 首 先 需 要 考虑 的 是 : 
这 是 什么 互联 网 产品 ? 

“ 它 的 目标 人 群 是 哪 一 类 ? 

需要 达到 什么 目的 ? 


些 问题 决定 了 这 个 界面 呈现 出 来 是 给 谁 看 的 、 用 的 ， 给 公司 市 来 什么 利益 ， 以 便 决 定 设 计 方 同 。 


2. 贯穿 全 局 的 思维 一 一 层 级 概念 人 


互联 网 产品 视觉 设计 其 实 是 将 很 多 的 产品 思维 和 逻辑 条 ， 通 过 杭 理 ， 串 联 起 来 成 为 一 个 完整 逻辑 ， 用 美观 的 形式 体现 出 来 。 
这 些 逻 辑 条 都 是 有 层级 的 ， 有 的 重要 ， 有 的 次 要 。 有 的 需要 主动 友 现 ， 有 的 是 被 动 友 现 。 有 的 可 以 阅读 ， 有 的 可 以 操作 。 


束 像 我 们 写 一 本 书 的 时 候 需 要 目录 、 大 纲 ， 男 一 幅 画 时 需要 从 大 框 染 开始 打 基 础 ， 而 一 个 网 站 则 具备 网 站 地 图 ， 每 个 产品 的 
每 个 页 面 和 模块 中 都 包含 着 层级 思维 。 


2.3” 视 网 设 计 流 程 与 万 六 


视 嘻 设计 流程 是 : 研究 分 析 ， 设 计 草 案 ， 设计 辩证， 设计 提案 


iy 


sn 


全 视觉 设计 流程 


在 确定 好 设计 方向 之 后 ， 接 下 来 要 做 的 残 是 深入 设计 ， 或 者 说 细 芒 设计 。 细 设计 决定 了 界面 的 精致 程度 ， 一 个 界面 要 体现 
的 氛围 基本 都 是 通过 细 市 实现 的 。 所 以 说 ,细节 设计 是 设计 方向 的 一 种 具体 表现 。 细 节 设 计 一 般 包 括 两 个 方面 ,一 是 添加 设计 元 
素 ， 二 是 进行 颜色 搭配 。 


3.1 细 古 设计 的 两 个 关键 扎 


设计 元 素 相 当 于 设计 中 的 基础 竺 号， 在 界面 设计 中 ， 它 是 一 些小 的 凌 饰 性 模块 ， 包 括 概念 元 素 、 视 党 元 素 、 关 系 元 素 、 实 用 
元 素 。 


对 于 互联 网 产品 来 讽 ， 转 化 率 是 产品 做 得 是 否 成 功 的 衡量 标准 之 一 。 在 这 个 消费 者 只 有 3 秒 注意 力 的 时 代 ， 我 们 应 该 最 大 化 
地 利用 色彩 、 图 片 和 文字 信息 来 提高 转化 率 。 颜 色 作 为 情感 表现 的 重要 艺术 语言 之 一 ， 在 视 竞 传达 中 起 着 至 天 重要 的 作用 ， 颜 色 
能 在 坦 时 间 内 传递 信息 和 情感 。 合 适 的 颜色 能 对 用 户 产 生 情 感 影响 ， 帮 助 我 们 将 用 户 审 到 下 一 步行 动 中 。 


多 媒体 友 展 和 读 图 时 代 的 到 来 使 得 用 户 对 于 视 党 设计 的 质量 要 求 提高 。 我 们 更 应 该 努力 地 寻求 色彩 情感 的 力量 ， 在 各 个 方面 
寻求 可 以 借鉴 的 营养 ， 从 内 到 外 地 提高 我 们 的 设计 质量 。 


我 们 先 来 看 一 下 以 下 这 些 图 片 的 颜色 给 大 家 的 感 完 。 


(1) 哪 条 路 一 个 人 更 敢 走 ? 


人 色彩 情感 的 影响 力 (一 ) 


(2) 哪 份 食物 更 易 引 起 食欲 ? 


人 色彩 情感 的 影响 力 (二 ) 


(3) 哪个 孩子 你 更 想 帮 助 他 ? 


所 以 色彩 表达 的 感情 非 芝 直观 ， 让 人 第 一 眼 融 能 感受 到 设计 师 要 传达 给 用 户 的 感情 ， 及 其 想 要 表达 的 设计 方向 。 色 彩 让 用 户 
的 大 脑 友 生化 学 变化 ， 引 导 人 们 进行 下 一 步行 为 。 


人 色彩 情感 的 影响 力 (三 ) 


3.3 图 标 


图 标的 英文 是 icon， 在 桌面 图 标 上 代表 的 是 软件 标识 ， 在 界面 中 的 图 标 一 般 是 功能 标识 。 图 标 是 设计 中 经 单 使 用 的 元 素 忆 
一 ， 图 标 精 致 、 细 致 ， 会 使 整个 设计 感 观 提升 ， 让 设计 的 档次 得 到 提高 。 


3.4 文字 


文字 是 传达 信息 最 直观 的 表达 方式 之 一 ， 它 是 组 成 页 面 排版 的 基本 模块 。 字 体 、 字 号 的 运用 不 同 ， 可 以 给 页 面市 来 不 同 的 气 
质 和 页 面 天 系 。 


界面 中 的 字体 ， 很 少 会 做 企图 上 ， 大 多 数字 体 由 前 痕 工 程 师 来 实现 ， 设 计 师 一 般 会 选择 用 户 设备 里 目 市 的 字体 来 进行 设计 。 
如 果 在 页 面 中 用 了 三 膏 黑 、 正 黑 等 大 量 第 三 方 字 体 ， 用 尸 的 设备 没有 这 些 字体 束 会 以 默认 字体 来 显示 ， 最 终 效 果 会 和 视 狗 稿 有 很 
大 出 入 。 

文字 的 层级 一 般 用 字号 去 区 分 ， 如 果 既 用 字号 、 又 用 不 同 字体 去 区 分 信息 ， 会 显得 凌乱 、 缺 之 美感 ， 因 此 字体 的 数量 应 做 减 
法 ， 能 用 两 种 束 不 要 用 3 种 ， 能 用 一 种 束 不 要 用 两 种 。 

了 解 字 体 设计 的 基础 术语 非常 重要 ， 这 些 术语 在 介绍 字体 设计 的 相关 文章 中 经 常 出 现 。 比 如 x-height (X 字 高 ) 指 的 是 从 字 


母 的 基准 线 开始 往 上 到 最 矮 字 母 的 项 端的 距离 ， 当 X 字 高 的 比例 相对 大 一 些 时 丈 能 增加 易 读 性 。 


在 大 多 数 情 况 下 我 们 都 选择 使 用 系统 上 自 市 的 字体 ， 如 微软 雅 黑 、 宋 体 、 黑 体 等 来 定义 标题 和 内 容 。 但 有 时 ,我们 在 做 
LOGO、banner 设 计时 也 需要 通过 对 字体 进行 改造 ， 来 达到 更 加 理想 的 效果 。 这 时 我 们 束 需 要 掌握 字体 的 一 些 最 基本 的 设计 原 
则 。 


了 了 CO 下 (CQ_ 


| 
a: 大 与 子 局 ; b: X 字 高 ; Cc: 升 部 ; d: 升 部 线 ; e: 大 与 线 
f: 中 央 线 ; g: 基线 ; h: 降 部 线 ; i: 降 澡 


信 字 体 的 基础 术语 


3.5” 表 蛙 


在 设计 过 程 当 中 ， 随 着 设计 经 验 的 积 罕 ,表单 的 设计 也 越 来 越 有 讲究 ， 以 致 形成 一 套 设计 准则 或 者 规 汉 。 表 单 设 计 的 重要 
性 ， 有 了 时候 会 影响 一 个 产品 的 成 败 。 


第 4 草 ”回归 设计 理念 


4. 1 提炼 i 统计 理念 、\ 


对 设计 方向 、 方 法 、 过 程 进行 提炼 ， 友 现 共鸣 处 也 进行 提炼 ， 这 样 更 能 巩固 和 得 出 设计 理念 


全 提炼 设计 理念 的 闭环 过 程 


例如 在 Material Design 中 ， 提 炼 的 设计 理念 


9 信息 载体 束 是 魔法 纸 片 。 


魔法 纸 片 


让 这 个 可 以 层 著 、 合 并 、 分 离 ， 拥 有 现实 中 的 厚度 、 惯 性 和 反馈 的 魔法 纸 片 ， 拥 有 液体 的 一 些 特性 ， 能 够 自由 伸展 变形 。 这 
个 设计 理念 突出 纸 片 的 魔法 特性 ， 这 些 是 真实 纸 片 所 不 具备 的 能 力 。 例 如 : 纸 片 可 以 伸缩 、 改 变形 状 ; 纸 片 变形 时 可 以 裁剪 内 
容 ， 当 纸 卢 缩 小 时 ， 内 容 大 小 不 变 ， 而 是 隐藏 超出 部 分 ; 多 张 纸 片 可 以 拼接 成 一 张 ， 一 张 纸 户 可 以 分 有 裂 成 多 张 ; 纸 片 可 以 在 任何 
位 置 凭空 出 现 。 


实 
4 


限制 魔法 纸 片 的 个 别 效果 : 一 项 操作 不 能 同时 触 皮 两 张 纸 片 的 反馈 ; 层 堵 的 纸 片 ， 海 报 局 度 不 能 相同 ; 纸 片 不 能 互相 穿 透 
纸 片 不 能 弯 折 ; 纸 片 不 能 产生 透视 ， 必 须 平 行 于 屏幕 。 


这 人 套 理 念 引 入 了 Z 轴 的 概念 ， 让 Z 轴 斑 直 于 屏幕 ， 用 来 表现 元 素 的 层 荆 关系 。Z 值 (海拔 高 度 ) 越 高 ， 元 素 离 界 面 底层 (水平 
面 ) 越 远 ， 投 影 越 重 。 这 里 有 一 个 前 提 ， 束 是 所 有 元 素 的 厚度 都 是 1dp。 


所 有 元 素 都 有 默认 的 海拔 高 度 ， 对 它 进行 操作 会 拾 升 它 的 海 披 高 度 ， 操 作 结 束 后 ， 应 该 党 回 默 认 海拔 高 度 。 同 一 种 元 素 ， 同 
样 的 操作 ， 拾 升 的 高 度 是 一 人 怪 的 。 


S\NI— 


和 人 Matetial Design 的 乙 轴 设计 概念 


所 以 ， 在 设计 前 会 有 一 些 理论 支持 自己 的 设计 ， 再 从 自己 的 设计 中 提炼 出 适合 这 套 设计 的 理念 。 


第 4 章 回归 设计 理念 


4. 1 提炼 i 统计 理念 、\ 


对 设计 方向 、 方 法 、 过 程 进行 提炼 ， 友 现 共鸣 处 也 进行 提炼 ， 这 样 更 能 巩固 和 得 出 设计 理念 。 


过 程 
壹 炼 


全 提炼 设计 理念 的 闭环 过 程 


例如 在 Material Design 中 ， 提 炼 的 设计 理念 


信息 载体 融 是 魔法 纸 上 户 。 


魔法 纸 片 


让 这 个 可 以 层 著 、 合 并 、 分 离 ， 拥 有 现实 中 的 厚度 、 惯 性 和 反馈 的 魔法 纸 片 ， 拥 有 液体 的 一 些 特性 ， 能 够 自由 伸展 变形 。 这 
个 设计 理念 突出 纸 片 的 魔法 特性 ， 这 些 是 真实 纸 片 所 不 具备 的 能 力 。 例 如 : 纸 片 可 以 伸缩 、 改 变形 状 ; 纸 片 变形 时 可 以 裁剪 内 
容 ， 当 纸 卢 缩 小 时 ， 内 容 大 小 不 变 ， 而 是 隐藏 超出 部 分 ; 多 张 纸 片 可 以 拼接 成 一 张 ， 一 张 纸 户 可 以 分 有 裂 成 多 张 ; 纸 片 可 以 在 任何 
位 置 凭空 出 现 。 


实 
4 


限制 魔法 纸 片 的 个 别 效果 : 一 项 操作 不 能 同时 触 皮 两 张 纸 片 的 反馈 ; 层 堵 的 纸 片 ， 海 报 局 度 不 能 相同 ; 纸 片 不 能 互相 穿 透 
纸 片 不 能 弯 折 ; 纸 片 不 能 产生 透视 ， 必 须 平 行 于 屏幕 。 


这 人 套 理 念 引 入 了 Z 轴 的 概念 ， 让 Z 轴 斑 直 于 屏幕 ， 用 来 表现 元 素 的 层 荆 关系 。Z 值 (海拔 高 度 ) 越 高 ， 元 素 离 界 面 底层 (水平 
面 ) 越 远 ， 投 影 越 重 。 这 里 有 一 个 前 提 ， 束 是 所 有 元 素 的 厚度 都 是 1dp。 


所 有 元 素 都 有 默认 的 海拔 高 度 ， 对 它 进行 操作 会 拾 升 它 的 海 披 高 度 ， 操 作 结 束 后 ， 应 该 党 回 默 认 海拔 高 度 。 同 一 种 元 素 ， 同 
样 的 操作 ， 拾 升 的 高 度 是 一 人 怪 的 。 


S\NI— 


和 人 Matetial Design 的 乙 轴 设计 概念 


所 以 ， 在 设计 前 会 有 一 些 理 论 支持 自己 的 设计 ， 表 从 目 己 的 设计 中 提炼 出 适合 这 套 设 计 的 理念 。 


4.2 设计 中 的 法 则 


4.2.1 7+2 法 则 | 


我 们 用 一 句 话 摘 述 这 个 法 则 : 


一 般 人 的 短 时 记忆 容量 约 为 7 个 加 减 2 个 ， 即 ?~ 9 个 ， 可 以 理解 为 7 加 减 2 个 组 块 。 为 了 更 好 地 理解 这 个 法 则 ， 我 们 移 做 一 个 
小 游戏 。 


人 随机 数字 


然后 移 开眼 睛 回忆 一 下 ， 看 看 你 还 记得 几 个 。 
现在 再 读 一 遍 下 面 的 随机 字母 : 
然后 再 用 上 述 方法 来 测试 一 下 目 己 的 记忆 。 


看 看 结论 是 不 是 这 样 的 : 假如 你 的 短 时 记忆 像 一 般 人 那样 ， 你 可 能 会 回忆 出 5~9 个 单位 ， 即 7+2 个 ， 这 个 有 趣 的 现象 就 是 神 
奇 的 7+2 效 应 。 


人 随机 字母 


在 宽度 有 限制 的 手机 端 屏幕 上 ， 这 个 法 则 较为 适用 ， 设 计 界 面 的 时 候 有 效 地 人 在 界面 上 将 内 容 进 行 排 布 ， 如 一 些 App 的 频道 入 
口 。 大 而 宽 的 PC 端 已 经 不 太 适 用 这 个 法 则 了 。 


4.3 ”参考 线 的 从 值 


说 起 参考 线 ， 大 家 一 定 很 熟悉 ， 我 们 在 做 设计 的 时 候 经 常 需 要 用 到 这 个 工具 来 做 对 齐 定位 等 工作 ， 那 么 你 真 的 对 参考 线 了 解 
得 很 透彻 了 吗 ? 

好 的 参考 线 能 让 上 下 游 的 合作 对 象 了 解 设计 师 对 齐 的 规律 和 本 意 。 很 多 设计 师 为 了 提升 设计 作品 的 品质 ， 在 设计 展示 图 上 标 
上 各 种 圈 ， 让 售 单 的 图 形 看 起 来 非常 高 映 。 


1. 为 何 辅助 线 能 提升 作品 档次 


(1) 使 设计 成 品 有 数理 依据 ， 设 计 元 素 乙 间 都 不 是 各 目 独 立 仔 在 的 ， 一 定 有 某 种 视觉 上 的 关联、 透视 、 对 齐 ， 娟 显 严谨 。 


人 锤子 LOGO 


(2) 有 规 兆 性 的 数据 便于 扩展 ， 兼 容 到 各 个 场景 的 应 用 ， 或 者 对 其 他 附属 产品 及 应 用 制定 规则 及 指导 。 


(3) 添加 辅助 线 后 ， 能 读 公 设计 师 的 用 意 、 思 维 走向 ， 以 及 设计 稿 的 对 齐 规则 定义 。 


2. 两 种 参考 线 制图 方法 


(1) 坐标 制图 法 。 坐 标 制图 法 融 是 画 很 多 方 格子 ， 界 定 出 标志 在 每 个 格子 里 的 图 形 的 样子 ， 以 此 为 标准 样本 。 大 多 应 用 在 
VI 设 计 、 工 业 、 唐 卡 等 绘制 上 。 


(2) 黄金 分 割 制图 法 。 依 据 参 考 线 作 图 的 目的 束 是 做 出 极 具 美感 并 便于 应 用 的 图 标 。 黄 金 分 割 比 正 是 做 参考 线 的 依据 之 
一 。 但 一 定 切 记 ， 参 考 线 仪 是 参考 ， 它 可 以 使 设计 师 较 为 容易 地 找到 成 锅 、 合 适 的 比例 。 


全 坐标 制图 法 


在 视 党 上 上， 黄金 分 割 本 质 上 市 来 的 是 和 谐 一 相似、 重复 、 联 系 ， 以 及 变化 一 和 运动、 活力 。 


我 们 看 图 像 的 时 候 ， 有 眼睛 和 心灵 通过 将 视 完 单元 整合 为 一 个 融合 的 整体 ， 来 组 织 视 网 差异 。 心 灵 本 能 地 试图 创造 秩序 以 控 脱 
混乱 ， 人 存储 信息 。 艺 术 组 织 有 7 个 原则 一 和 和谐、 变化 、 平 衡 、 比 例 、 主 导 倾向 、 运 动 和 简约 。 艺 术 的 组 织 过 程 焉 是 通过 相似 将 
对 立方 面 天 联 在 一 起 ， 最 后 需要 成 为 一 个 统一 。 以 线条 为 例 ， 当 一 个 艺术 家 运用 线条 使 作品 成 为 整体 的 时 候 ， 亏 林家 会 通过 长 
度 、 宽 度 、 特 征 等 一 种 或 全 部 的 天 联 性 来 创造 最 终 的 和 谐 体 。 比 例 虽 然 是 单独 列 出 的 一 个 原则 ， 但 我 们 可 以 看 到 黄金 分 割 同时 拥 
有 两 个 特性 : 和 谐 、 变 化 。 


第 5 草 ”设计 规 泄 


为 什么 要 制定 设计 规范 ? 


可 能 有 些 设计 师 会 认为 ， 制 定 规范 会 让 设计 有 局 限 性 ， 影 响 设计 师 的 设计 思路 ， 或 者 认为 这 样 做 只 是 为 了 体现 公司 视 完 形象 
或 视 冤 团队 形象 。 其 实 互 联网 公司 的 产品 设计 规 沁 并 非 仅 仅 用 来 宣传 形 销 ， 更 多 用 来 简化 开 友 过 程 ， 使 多 个 产品 拥有 一 致 的 体 
验 、 一 致 的 视 党 风格 。 在 一 个 部 门 舍 有 多 个 产品 线 的 情况 下 ， 设 计 规 学 最 能 体现 其 作用 。 


好 的 设计 规 学 让 设计 团队 成 员 能 高 效 地 制作 出 既 满足 业务 需求 、 又 能 让 用 户 轻 易 完成 目标 的 产品 。 每 个 公司 或 者 团队 ， 到 了 
一 定 阶段 ， 都 需要 产品 设计 规 泡 来 突破 “ 瓶 须 ”， 提 高 效率 ， 改 善 产 品 ， 让 产品 和 团队 都 能 够 轻 丢 上阵 ， 走 得 更 远 。 

以 下 的 设计 都 很 美观 ， 但 哪个 是 同一 蒜 互联 网 产品 ? 

规 管 制定 出 来 并 非 一 成 不 变 ， 随 着 业务 友 展 、 需 求 增加 ， 规 荡 要 在 原 有 内 容 基础 上 进行 修改 、 增 删 。 规 沁 的 蛤 吴 束 是 每 次 有 


重大 更 改 ， 都 会 有 很 多 相应 的 调整 ， 甚 至 还 会 达 扯 到 设计 结构 和 开 友 架构 的 修改 。 愤 重修 改 已 制定 出 的 规范， 多 及 用 小 更 改 和 迭代 
的 方式 对 规 泡 进行 补充 修改 。 


WEATHER PARTY 


[elelg< 


作风 格 一 致 的 视觉 让 产品 整体 性 更 强 


拥有 设计 规范 并 不 代表 团队 不 再 需要 设计 师 ， 也 不 代表 团队 中 谁 都 可 以 使 用 规范 组 件 拼 拼 凑 凑 束 能 输出 设计 效果 图 。 闫 品 设 
计 从 有 感性 的 成 分 ， 需 要 设计 师 通 过 调研 和 认 知 去 设计 、 把 握 产 品 的 体验 。 规 范 是 工具 、 标 尺 ， 需 要 设计 开 友 人 员 灵 活 运 用 和 不 


新 完善 ， 适 应 变化 。 


全 二 < 上 了 栅 

@ QQ := 《 鸣 可 

@ El 项 
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] 只 ”wujiamin 


人 密码 符合 要 求 。 国 密码 不 一 至 


人 输入 框 规范 图 例 


5.1 ” 规 沁 的 重要 性 


设计 规 汽 能 为 团队 解决 不 少 问题 ， 提 高 效率 ， 这 主要 体现 在 以 下 几 个 万 面 。 


5.2 制定 规 汇 的 5 大 原则 


在 制定 规范 的 时 候 ， 要 避免 走 弯 路 ， 应 借鉴 一 些 已 经 制定 规范 的 案例 ， 作 为 自己 规范 的 范本 。 在 制定 规范 的 时 候 ， 需 要 遵循 
以 下 5 大 原则 。 


5.3 ”制定 规 沁 的 流程 


规范 的 设计 不 是 一 跌 而 束 的 ， 需 要 在 早期 束 开 始 注 意 积 容 和 归纳 ， 仔 细 地 制作 和 核对 ， 最 后 汇 态 和 微调 。 


人 制定 规范 的 流程 


5.4 Web 规 泡 制定 的 案例 


规范 的 制定 是 在 设计 风格 已 经 定 方 向 的 基础 上 ， 将 有 共性 的 设计 整理 出 来 。 例 如 我 们 需要 一 个 页 面 布 局 规范， 通过 将 界面 栅 
格 化 的 计算 方式 ， 可 以 得 到 一 个 忌 体 宽度 。 这 个 会 影响 整个 网 站 的 界面 宫 度 设计 。 
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Aicon 页 面 布 局 规范 


苗 页 埃 banner 
280px 600px 280px 


Bbpx | ee 


ha 


Aicon 通 过 栅 格 计算 出 的 页 面 布局 


图 片 模块 规 沁 有 别 于 banner 规 学 。 图 片 模 块 规范 指 的 是 图 片 尺寸 ， 图 片 制作 过 程 中 因为 操作 要 求 而 制定 出 需要 规避 的 地 方 


和 指定 的 地 方 ， 如 品牌 LOGO 和 联合 LOGO 的 授 放 位 置 。 


IMAGE SIZE 


580 340 px 


580 244 px 


信 图 片 规范 


由 于 功能 的 需要 ， 图 片 的 显示 会 有 很 多 种 ， 并 且 人 在 不 同 的 页 面 上 ， 如 首页 、 列 表 页 、 详 情 页 、 填 写 页 、 订 单 详 情 页 。 这 个 时 


候 ， 需 要 为 各 个 页 面 的 图 片 模块 制定 标准 。 


详情 页 产品 主 图 ( 正在 看 ) 


列表 页 单 品 图 
106px 108px 


详情 页 产品 主 图 详情 页 产品 推荐 图 


会 不 同 页 面 中 的 图 片 模块 规范 
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